<template>
    <div class="header">
        <div class="header-left">
          <span >
              <img class="header-ico-arrow_left" src="@/assets/style/ico/arrow_left.png">
          </span>
        </div>
        <div class="header-input">
          <span >
              <img class="header-ico-search" src="@/assets/style/ico/search.png">
          </span>
          输入城市/景点/游玩主题
        </div>

        <!--点击这一块区域，跳转到city页面，vue会去路由中找对应的配置，就会跳转过去-->
        <router-link to="/city">
          <div class="header-right">
            <!--{{this.$store.state.city}}-->
            {{this.city}}
            <span >
              <img class="header-ico_show_more" src="@/assets/style/ico/show_more.png">
          </span>
          </div>
        </router-link>

    </div>
</template>

<script>

  //这写法就是将vuex中数据映射到计算属性中
  import {mapState} from 'vuex'

  export default {
    name: 'home-header',
    computed: {
      ...mapState(['city'])
    }
  }
</script>


<!--lang=stylus表示想使用stylus来写样式，scoped表示只对当前组件有效 -->
<!--1rem = html font-size = 50px-->
<style scoped lang="stylus">
    /*样式里面引入样式，要加一个@符号*/
    @import "~styles/varibles.styl"

    .header
      display: flex;
      line-height: $headerHeight
      background: $bgColor;
      color : #fff;
      .header-ico-search
        width :.34rem;
        height : .34rem;
      .header-ico-arrow_left
        width :.64rem;
        height : .64rem;
      .header-ico_show_more
        width :.44rem;
        height : .44rem;
      .header-left
        width: .64rem;
        float: left;
      .header-input
        flex: 1;
        padding-left : .2rem;
        height : .64rem;
        background : #fff;
        border-radius : .1rem;
        margin-top : .12rem;
        line-height :.64rem;
        margin-left : .2rem;
        color: #ccc;
      .header-right
        min-width: 1.04rem;
        padding: 0 .1rem
        padding-left : .2rem;
        float: left;
        color: #fff
        text-align :center;



</style>
